<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<style>
    figure img {
        box-shadow: 5px 6px 15px rgba(161, 161, 161, 0.9)
    }

    .figure-caption {
        margin-top: 5px;
        font-size: 20px;
    }

    * {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
        float: left;
        margin-left: 60px;
        line-height: 60px;
    }

    a {
        text-decoration: none;
        color: rgb(229, 35, 61);
    }

    ul li a:hover {
        color: orange;
        text-decoration: none;
    }

    .ok {
        height: 36px;
        background-color: #863c13;
    }

    .j {

        font-size: 20px;
        float: left;
        margin-left: 500px;
        height: 36px;
    }

    .center {
        width: 1200px;
        height: 36px;
        margin: 0 auto;
        line-height: 36px;
    }

    .hhh {
        color: rgb(236, 242, 232);
        font-size: 19px;
        line-height: 35px;
        float: right;
    }

    .hhh a {
        color: #f4ecec;
        margin: 0 5px;
        font-size: 18px;
    }

    figure img {
        box-shadow: 5px 6px 15px rgba(161, 161, 161, 0.9)
    }

    .figure-caption {
        margin-top: 5px;
        font-size: 20px;
    }

    .top {
        width: 500px;
        height: 55px;
        font-size: 20px;
        color: azure;
        margin: 0 auto;
        text-align: center;
        background-size: 1200px 55px;
        line-height: 55px;
        border-top-right-radius: 20px;
        background: rgb(187, 53, 53);
    }
</style>

<body>
    <div class="container-fluid px-0">
        <div class="ok">
            <div class="center">
                <div class="j" style="color: rgb(230, 237, 237);">
                    <b>校园失物招领系统</b>


                </div>
                <div class="hhh">

                    <a href="denglu.html">登录</a>
                    <a href="zhuce.html">免费注册</a>
                    <a href="#">购物车</a>
                    <a href="#">我的订单</a>

                </div>

            </div>
        </div>

        <div class="w-100  d-flex justify-content-center"
            style="height: 60px;background-color:#1d1d22;min-width: 800px;">
            <div class="" style="color: white;">
                <ul class="">
                    <li>
                        <a href="gui.html">首页</a>
                    </li>
                    <li>
                        <a href="fxx_GGXX.html">公告信息</a>
                    </li>
                    <li>
                        <a href="shiwu1.html">失物信息</a>
                    </li>
                    <li>
                        <a href="zhaoling1.html">招领信息</a>
                    </li>
                    <li>
                        <a href="demo00.html">交流论坛</a>
                    </li>
                    <li>
                        <a href="liuyan.html">留言反馈</a>
                    </li>
                    <li>
                        <a href="personal.html">个人中心</a>
                    </li>
                    <li>
                        <a href="./后台/index.html">后台管理</a>
                    </li>

                </ul>

            </div>

        </div>
    </div>
    <div class="container">
        
        <!-- 头部 -->
        <div class="row justify-content-between"
            style="background-color:#7f4e16;border-radius: 0px 0px 15px 15px;height: 50px;box-shadow: 5px 6px 2px rgba(0,0,0,0.9) ">
            <div class="col-2">
                <button type="button" class="btn btn-danger"
                    style="margin-left: -14px;background-color: #ab3104;border: #ab3104;width: 100px;height: 35px;line-height: 5px;">失物信息</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn" style="color: aliceblue;margin-left: 65px;font-size: 12px;"><span
                        style="margin-left: 40px;">您现在的位置:失物信息</span></button>
            </div>
        </div>
        <!-- 导航 -->
        <div class="row justify-content-end" style="margin-top: 15px;">
            <form class="form-inline my-2 my-lg-0" style="float: right;">
                <span style="font-size: 14px;color: #7f4e16;margin-right: 10px;">物品名称</span>
                <input class="form-control mr-sm-1" type="search" placeholder="物品名称" aria-label="Search"
                    style="width: 120px;height: 42px; border:1px solid #7f4e16;text-align: right;">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit"
                    style="background-color: #7f4e16;color: aliceblue;box-shadow: 2px 2px 2px rgba(0,0,0,0.9);border: #7f4e16;">
                    <i class="fa fa-search" style="color: rgb(255, 255, 255);font-size: 20px;"></i>搜索
                </button>
            </form>
        </div>
        <!-- 内容 -->

        <div id="ppp" class="container" style="margin-top: 40px;">
            <div class="row">
                <div class="col-3">
                    <figure class="figure">
                        <a href="shiwu2.html"><img src="./img/./111.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">笔记本</figcaption></a>
                    </figure>
                </div>
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/./222.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">水杯</figcaption>
                    </figure>
                </div>
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/./333.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">智能手环</figcaption>
                    </figure>
                </div>
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/./444.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">吹风机</figcaption>
                    </figure>
                </div>
            </div>
            <!-- 第二行 -->
            <div class="row" style="margin-top: 30px;">
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/555.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">跳绳</figcaption>
                    </figure>
                </div>
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/666.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">毛绒熊</figcaption>
                    </figure>
                </div>
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/777.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">饮料</figcaption>
                    </figure>
                </div>
                <div class="col-3">
                    <figure class="figure">
                        <img src="./img/888.png" class="figure-img img-fluid rounded" alt="...">
                        <figcaption class="figure-caption" style="text-align: center;">耳机</figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</body>

</html>